<!--
 * @version:
 * @Company:
 * @Description:
 * @FilePath: \src\views\tool\gen\modal\download\index.vue
-->
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="下载代码" width="700px" :height="700" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { FormSchema } from '/@/components/Table';
  import { getTplList } from '../../api';
  export default defineComponent({
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const ids = ref([]);
      const schemas: FormSchema[] = [
        {
          field: 'tpl',
          label: '模板',
          component: 'ApiSelect',
          rules: [
            {
              required: true,
              type: 'array',
            },
          ],
          colProps: {
            span: 16,
          },
          componentProps: {
            mode: 'multiple',
            api: getTplList,
            onChange: (event) => {
              console.log(event);
            },
            resultField: 'items',
            labelField: 'label',
            valueField: 'value',
          },
        },
      ];
      const [registerForm, { resetFields, validate, setProps, getFieldsValue }] = useForm({
        labelWidth: 100,
        schemas: schemas,
        showActionButtonGroup: false,
      });
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        ids.value = data.rows;
        await resetFields();
        setModalProps({
          confirmLoading: false,
        });
        await setProps({
          schemas: schemas,
        });
      });
      /**
       * @vuese
       * @Description: 保存操作
       * @arg {*}
       */
      async function handleSubmit() {
        try {
          const values = await validate();
          emit('success', { tpl: values?.tpl || getFieldsValue()?.tpl, ids: ids.value });
          setModalProps({ confirmLoading: true });
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        registerModal,
        handleSubmit,
        registerForm,
      };
    },
  });
</script>
